<template>
  <div>
    <van-nav-bar fixed title="商品详情" left-arrow @click-left="$utils.back($route.path)" />
    <div class="has-top has-bottom">
      <!-- 图片 -->
      <PurchaseImgBox :model="model" />

      <!-- 标题栏 -->
      <PurchaseIntro :model="model" />

      <!-- 内容切换 -->
      <van-tabs
        ref="tabs"
        v-model="active"
        sticky
        :offset-top="$conf.stickyTop"
      >
        <van-tab title="共享库存">
          <PurchaseShareSpec :model="model" />
        </van-tab>
        <van-tab title="商品详情">
          <div v-show="model.Description" class="pt-15" v-html="model.Description" />
        </van-tab>
      </van-tabs>
    </div>
    <!-- 底部栏 -->
    <div class="fixed-bottom  bottom-box bg-white">
      <div class=" full-height">
        <button class=" bg-primary color-white btn fs-28" @click="SavePurchaseProductPriceStock">保存</button>
      </div>
    </div>

  </div>
</template>

<script>
import PurchaseImgBox from 'components/purchase/imgList'
import PurchaseIntro from 'components/purchase/introduction'
import PurchaseShareSpec from 'components/purchase/shareSpec'
import { GetProductDetailPage, SavePurchaseProductPriceStock } from 'api/purchase'

export default {
  components: { PurchaseImgBox, PurchaseIntro, PurchaseShareSpec },
  data() {
    return {
      active: 0,
      model: {}
    }
  },
  computed: {},
  created() {
    this.GetProductDetailPage(this.$route.params.id)
  },

  methods: {
    // 验证入参
    validateData() {
      if (this.model.Skus && this.model.Skus.length > 0) {
        const _li = this.model.Skus
        let isAble = true
        for (let i = 0; i < _li.length; i++) {
          if (_li[i].Price === '' || _li[i].Stock === '') {
            isAble = false
            break
          }
        }
        if (!isAble) {
          this.$toast('数据不全，请补全')
        }
        return isAble
      }
    },
    // 获取商品详情
    GetProductDetailPage(id) {
      GetProductDetailPage({ id: id }).then(res => {
        if (res) {
          this.ProductData = res.Data
          this.model = res.Data.PurchaseProductModel
          this.detailShow = true
        }
      })
    },
    // 添加库存
    SavePurchaseProductPriceStock() {
      if (this.validateData()) {
        SavePurchaseProductPriceStock(this.model).then(res => {
          if (res) {
            this.$utils.back(this.$route.path)
          }
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>

/deep/.van-tabs__nav {
  background: $colorF5;
  .van-tab {
    font-size: 16px;
    font-weight: bold;
  }
}
/deep/.van-tabs__nav_Fixed {
  background: $colorF;
}
/deep/.van-hairline--top-bottom::after,
.van-hairline-unset--top-bottom::after {
  border: none;
}

.bottom-box{
  height:120px;
  width:100%;
  .btn{
    position: absolute;
    right: 23px;
    top: 20px;
    width: 220px;
    line-height: 80px;
    border-radius: 40px;
    text-align: center;
  }
}
</style>
